<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 商品列表 -->
      <!-- 输入框   clearable属性输入内容后后面会出现x号 -->
      <div>
        <el-input
          placeholder="请输入内容"
          v-model="query"
          class="input-with-select"
          clearable
        >
          <!-- 用户输入数据，点击后调用接口拿数据 -->
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="refreshTable()"
          ></el-button>
        </el-input>
      </div>
      <!-- 表格 -->
      <!-- 表格中stripe 设置斑马格  border：设置边框 data里面是数组-->
      <el-table :data="tableData" style="width: 100%" stripe border>
        <!-- width可设置每一列的宽度 -->
        <!-- 增加一列序号列 -->
        <el-table-column type="index" width="50"> </el-table-column>
        <!-- prop里面是数组里面每一项属性 -->
        <el-table-column label="商品名称" prop="goods_name"> </el-table-column>
        <el-table-column label="商品价格（元）" prop="goods_price" width="105">
        </el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="80">
        </el-table-column>
        <!-- formatter时间格式化代码 -->
        <el-table-column
          label="创建时间"
          :formatter="timestampToTime"
          prop="add_time"
          width="150"
        >
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// import { getResultList } from '../../api/goods'
export default {
  data() {
    return {
      // 声明一个空数组 接收后台拿过来的数据
      tableData: [],
      // 拿后台数据的总数
      tableTotal: 0,
      // 定义一个变量拿用户的输入值
      query: '',
      currentPage: 1,
      pageSize: 10,
    }
  },
  // 刚进来就调用这个接口拿取数据
  created() {
    this.refreshTable()
  },
  methods: {
    // 封装一个方法，调接口获取数据
    async refreshTable() {
      const res = await this.$http({
        url: '/goods',
        params: {
          pagenum: this.currentPage,
          pagesize: this.pageSize,
          query: this.query,
        },
      })
      // console.log(res.data.data)
      this.tableTotal = res.data.data.total
      this.tableData = res.data.data.goods
    },
    async handleDelete(index, row) {
      // console.log(index, row)
      const res1 = await this.$http({
        method: 'delete',
        url: `/goods/${row.goods_id}`,
      })
      // console.log(res1)
      // 数据删除后重新调用接口拿取数据
      this.refreshTable()
    },
    // 时间格式化处理
    timestampToTime(row, column) {
      // console.log(row)
      var date = new Date(row.add_time * 1000)
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y + M + D + h + m + s
    },
    // 分页处理 val当前点击的每页条数
    handleSizeChange(val) {
      this.pageSize = val
      this.refreshTable()
    },
    // val当前点击的页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.refreshTable()
    },
  },
}
</script>

<style lang="less" scoped>
// 输入框样式
.el-input {
  width: 530px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-card__body {
  padding: 0;
}
</style>
